import 'package:example/video_editor/video_editor_view_model.dart';
import 'package:example/video_player/video_player_view_model.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:jui/jui.dart';
import 'package:zz_video_maker/zz_video_maker.dart';

import 'drag_move_box.dart';

class VideoComponentWidget extends StatelessWidget {
  final Widget child;
  final EditedComponentDataMixin data;
  final double scale;

  VideoComponentWidget(
      {required this.data, required this.child, this.scale = 1.0, super.key});

  final VideoEditorViewModel viewModel = Get.find();

  late final _scale = ValueNotifier<double>(data.scale);

  @override
  Widget build(BuildContext context) {
    var e = data;
    var width0 = e.width;
    var height0 = e.height;
    return ValueListenableBuilder(
        valueListenable: _scale,
        builder: (context, scale0, widget0) {
          return DragMoveBox(
            offset: Offset(e.x * scale, e.y * scale),
            panEndCallBack: (offset) {
              e.x = offset.dx / scale;
              e.y = offset.dy / scale;
            },
            child: GetBuilder<VideoEditorViewModel>(
              id: 'component_widget',
              builder: (viewModel) {
                bool isEdit = viewModel.allEditedData!.editingObject == e;
                var width = width0 <= 0 ? null : width0 * scale * scale0;
                var height = height0 <= 0 ? null : height0 * scale * scale0;
                return Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      width: width == null ? width : width - 12,
                      height: height == null ? height : height - 12,
                      decoration: !isEdit
                          ? null
                          : BoxDecoration(
                              border: Border.all(
                              color: Colors.white,
                              width: 1,
                            )),
                    ),
                    SizedBox(
                      width: width,
                      height: height,
                      child: GestureDetector(
                          onTap: () {
                            if (viewModel.allEditedData!.editingObject == e) {
                              return;
                            }
                            viewModel.allEditedData!.editingObject = e;
                            viewModel.update(['component_widget']);
                            viewModel.pause();
                          },
                          child: GetBuilder<VideoEditorViewModel>(
                            id: e.key,
                            builder: (controller) => child,
                          )),
                    ),
                    if (isEdit)
                      SizedBox(
                        width: width,
                        height: height,
                        child: Stack(
                          children: [
                            Positioned(
                              child: JUIButton.custom(
                                icon: Icons.close,
                                iconSize: 16,
                                color: Colors.white,
                                width: 24,
                                height: 24,
                                backgroundColor: Colors.black,
                                radius: 12,
                                onPressed: () {
                                  if (e is EditedStickerData) {
                                    viewModel.currentEditedMedia?.stickers
                                        .remove(e);
                                    viewModel.updateSticker();
                                  } else if (e is EditedTextData) {
                                    viewModel.currentEditedMedia?.editedTexts
                                        .remove(e);
                                    viewModel.updateText();
                                  }
                                },
                              ),
                            ),
                            Positioned(
                                right: 0,
                                child: JUIButton.custom(
                                  icon: Icons.edit,
                                  iconSize: 16,
                                  color: Colors.white,
                                  width: 24,
                                  height: 24,
                                  backgroundColor: Colors.black,
                                  radius: 12,
                                  onPressed: () {
                                    if (e is EditedTextData) {}

                                    JUIBottomInput.show(
                                      context: context,
                                      completeText: (value) {
                                        if (e is EditedTextData) {
                                          e.texts['#TEXT1'] = value;
                                          e.texts['#TEXT2'] = value;
                                          return viewModel.vmsdkWidget
                                              .extractPreview(e)
                                              .then((value) {
                                            e.previewImagePath = value.$1;
                                            e.width =
                                                value.$2?.width.toInt() ?? 0;
                                            e.height =
                                                value.$2?.height.toInt() ?? 0;
                                            viewModel.update([e.key]);
                                            return true;
                                          });
                                        }
                                        return true;
                                      },
                                    );
                                  },
                                )),
                            // Positioned(
                            //   right: 0,
                            //   child: RotatedBox(
                            //     quarterTurns: 3,
                            //     child: Slider(
                            //       value: _scale.value,
                            //       max: 2,
                            //       min: 0.1,
                            //       onChanged: (value) {
                            //         // var x = e.x;
                            //         // var y = e.y;
                            //         // var centerX = x + _width * 0.5;
                            //         // var centerY = y + _height * 0.5;

                            //         // var newX = centerX + (x - centerX) * value;
                            //         // var newY = centerY + (y - centerY) * value;

                            //         // e.x = newX;
                            //         // e.y = newY;
                            //         e.width = (width0 * value).toInt();
                            //         e.height = (height0 * value).toInt();
                            //         e.scale = value;
                            //         _scale.value = value;
                            //       },
                            //     ),
                            //   ),
                            // )
                          ],
                        ),
                      ),
                  ],
                );
              },
            ),
          );
        });
  }
}
